<template>
    <el-card shadow="never">
      <!-- 新增刷新 -->
      <ListHeader @create="handleCreate" @refresh="getData"></ListHeader>
  
      <!-- 表格 -->
  
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="店鋪名称" />
        <el-table-column prop="email" label="店鋪郵箱" />
        <el-table-column prop="mobile" label="店鋪電話" />
        <el-table-column prop="address" label="店鋪地址" />
        <el-table-column prop="remind" label="庫存提醒" />
        <el-table-column  label="營業時間" >
            <template #default="{ row }">
                <el-tag>{{row.start_time+'---'+row.end_time}}</el-tag>
          </template>

        </el-table-column>
        <!-- <el-table-column prop="status" label="狀態">
          <template #default="{ row }">
            <el-tag :type="row.status == 1 ? '' : 'danger'">{{
              row.status == 1 ? "正常" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" text type="primary" @click="handleEdit(row)"
              >修改</el-button
            >
  
            <el-popconfirm
              title="是否要删除?"
              confirm-button-text="確定"
              cancel-button-text="取消"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button class="!m-0" text type="primary" size="small"
                  >刪除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="flex justify-center mt-4"
        @current-change="getData"
        :current-page="curpage"
        :page-size="limit"
      />
  
      <!-- 提交表单 -->
      <FormDrawer ref="formDrawerRef" @submit="handleSubmit" :title="drawerTitle">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
          <el-form-item label="店鋪郵箱" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item label="店鋪電話" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="店鋪地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="店鋪名稱" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="庫存提醒" prop="name">
            <el-input v-model="form.remind"></el-input>
          </el-form-item>
          <el-form-item label="營業時間">
            <el-time-select
      v-model="form.start_time"
      :max-time="end_time"
      class="mr-4"
      placeholder="開始時間"
      start="08:30"
      step="00:15"
      end="18:30"
    />
    <el-time-select
      v-model="form.end_time"
      :min-time="start_time"
      placeholder="結束時間"
      start="08:30"
      step="00:15"
      end="18:30"
    />
          </el-form-item>
          <!-- <el-form-item label="狀態" prop="status">
            <el-select v-model="form.status" placeholder="請選擇">
              <el-option label="正常" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item> -->
        </el-form>
      </FormDrawer>
    </el-card>
  </template>
  
  <script setup>
  import { ref } from "vue";
  
  import {
    getAbout,
    createAbout,
    updateAbout,
    deleteAbout,
  } from "~/api/systems.js";
  

  import {
    getStore,
    createStore,
    updateStore,
    deleteStore,
  } from "~/api/store.js";

  import FormDrawer from "~/components/FormDrawer.vue";
  import ListHeader from "~/components/ListHeader.vue";
  
  import { useInitTable, useInitForm } from "~/composables/useCommon.js";
  
  const start_time = ref('')
  const end_time = ref('')

  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    curpage,
    total,
    limit,
    getData,
    handleDelete,
  } = useInitTable({
    getList: getStore,
    delete: deleteStore,
    //   onGetListSuccess: (res) => {
    //
    //     // (total.value = res.data.total), (tableData.value = res.data.data);
    //   },
  });
  
  //表单
  
  const {
    formDrawerRef,
    formRef,
    form,
    rules,
    drawerTitle,
    handleSubmit,
    handleCreate,
    handleEdit,
  } = useInitForm({
    form: {
      email: "",
      mobile: "",
      address: "",
      name: "",
      start_time: "",
      end_time: "",
      remind:1
    },
    // rules: {
    //     title: [{ required: true, message: "標題不能为空", trigger: "blur" }],
    // },
    getData,
    update: updateStore,
    create: createStore,
  });
  </script>
  